<template>
    <el-dialog :model-value="dialogVisible" title="编辑预算" width="800px"
        :before-close="handleClose">
        <el-form ref="formRef" :model="dataForm" label-width="130px" :rules="rules" :inline="false">
            <el-form-item label="关联费用类型" prop="type">
          
                <!-- <el-select v-model="dataForm.type" multiple filterable :disabled="pageId == 'look' || formDisabled"
                    @change="selectFeeType(dataForm.type)" collapse-tags>
                    <el-option v-for="item in feeTypeOptions" :key="item.id" :label="item.typeName" :value="item.id" />
                </el-select> -->
                <el-button link  @click="opendFeeTypeDialog()">{{ Array.isArray(dataForm.type) &&
                    dataForm.type.length > 0 ? `已关联 ${Array.isArray(dataForm.type) &&
                    dataForm.type.length}
                    个`: '选择费用类型' }}</el-button>
            </el-form-item>
            <el-form-item label="预算控制" prop="limitExceed">
                <el-select v-model="dataForm.limitExceed" :disabled="pageType == 'look' || formDisabled" style="width:100%">
                    <el-option v-for="(item, index) in controlOptions" :key="index" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="超额控制" prop="afterExceed">
                <el-select v-model="dataForm.afterExceed" :disabled="pageType == 'look' || formDisabled" style="width:100%">
                    <el-option v-for="item in overCtrolOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="预算可上浮金额" prop="floatUpwardAmount">
                <!-- :disabled="pageId == 'look' || formDisabled || budgetVO.budgetTemplateId" -->
                <el-input-number v-model="dataForm.floatUpwardAmount" :min="0" :max="1000000000"
                    :disabled="pageId == 'look' || formDisabled" placeholder="请输入" :precision="2" :controls="false"
                    style="width:100%" class="amount" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit()" :disabled="pageType == 'look' || formDisabled">确定</el-button>
            </span>
        </template>
        <FeeTypeDialog :dialogVisible="feeDialogVisible" :selectTypeIds="dataForm.type" @on-update="selectFeeType"
            @handleClose="feeDialogVisible = false" v-if="feeDialogVisible" :disabled="pageType == 'look' || formDisabled"></FeeTypeDialog>
    </el-dialog>
</template>
<script>

import { reactive, toRefs, watch } from 'vue'
import { overCtrolOptions } from '@/util/config'
import FeeTypeDialog from '@/components/FeeTypeDialog/index.vue'

export default {
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        type: {
            default: 'edit',
            type: String

        },
        budgetVO: {
            type: Object,
            default: () => { }
        },
        formDisabled: {
            type: Boolean,
            default: false
        },
        editRowInfo: {
            type: Object,
            default: () => { }
        }

    },
    components: {
        FeeTypeDialog
    },
    emits: ['on-update', 'handleClose'],
    setup(props, { emit }) {
        // 预算控制
        const formRef = ref(null)
        const rules = reactive({
            type: [
                {
                    required: true,
                    message: '请选择',
                    trigger: 'blur'
                }
            ],
            afterExceed: [
                {
                    required: true,
                    message: '请选择',
                    trigger: 'blur'
                }
            ],
            floatUpwardAmount: [
                {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }
            ],
            limitExceed: [
                {
                    required: true,
                    message: '请选择',
                    trigger: 'blur'
                }
            ],
        }
        )
        const state = reactive({
            feeDialogVisible: false,
            controlOptions: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
            overCtrolOptions
        })
        const dataForm = ref({
            type: '',
            afterExceed: '',
            floatUpwardAmount: undefined,
            limitExceed: '0'
        })

        watch(() => props.editRowInfo, (newVal) => {
            console.log('获取数据')
            dataForm.value = newVal
        })

        const methods = {
            opendFeeTypeDialog() {
                state.feeDialogVisible = true
            },
            // 选择费用类型
            selectFeeType(list) {
                let arrList = []
                list.forEach(item => {
                    arrList.push({ feeTypeId: item, orgCode: dataForm.value.orgCode })
                })
                dataForm.value.type = list
                dataForm.value['feeTypeRelationParams'] = arrList

            },


            // 关闭
            handleClose() {
                formRef.value.resetFields()
                formRef.value.clearValidate()
                emit('handleClose')

            },

            submit() {
                if (!formRef) return
                formRef.value.validate(valid => {
                    if (valid) {
                        console.log(dataForm.value,'dataForm.valuedataForm.value')
                        emit('on-update', JSON.parse(JSON.stringify(dataForm.value)))
                        setTimeout(() => {
                             methods.handleClose()
                        },100)
                       
                    } else {
                        console.log('error submit!')
                        return false
                    }
                })
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            dataForm,
            rules,
           formRef
        }
    },
}
</script>
<style scoped lang="scss">
.amount {
    ::v-deep .el-input__inner {
        text-align: left;
    }
}
</style>